<template>
  <el-tree
    v-bind="$attrs"
    ref="treeRef"
    @node-click="
      (data, node, item, event) =>
        emit('node-click', { data, node, item, event })
    "
    @node-contextmenu="
      (event, data, node, instance) =>
        emit('node-contextmenu', { event, data, node, instance })
    "
    @check-change="
      (data, isChecked, childChecked) =>
        emit('check-change', { data, isChecked, childChecked })
    "
    @check="(data, checkedData) => emit('check', { data, checkedData })"
    @current-change="(data, node) => emit('current-change', { data, node })"
    @node-expand="
      (data, node, instance) => emit('node-expand', { data, node, instance })
    "
    @node-collapse="
      (data, node, instance) => emit('node-collapse', { data, node, instance })
    "
    @node-drag-start="(node, event) => emit('node-drag-start', { node, event })"
    @node-drag-enter="
      (draggingNode, dropNode, event) =>
        emit('node-drag-enter', { draggingNode, dropNode, event })
    "
    @node-drag-leave="
      (draggingNode, dropNode, event) =>
        emit('node-drag-leave', { draggingNode, dropNode, event })
    "
    @node-drag-over="
      (draggingNode, dropNode, event) =>
        emit('node-drag-over', { draggingNode, dropNode, event })
    "
    @node-drag-end="
      (draggingNode, dropEndNode, draggingNodePosition, event) =>
        emit('node-drag-end', {
          draggingNode,
          dropEndNode,
          draggingNodePosition,
          event,
        })
    "
    @node-drop="
      (draggingNode, dropNode, dropPosition, event) =>
        emit('node-drop', { draggingNode, dropNode, dropPosition, event })
    "
  >
    <template
      v-for="item in $attrs.slots"
      #[item.name]="scopedData"
      :key="item.name"
    >
      <component :is="item.content" v-bind="scopedData" />
    </template>
  </el-tree>
</template>

<script setup>
const emit = defineEmits([
  'node-click',
  'node-contextmenu',
  'check-change',
  'check',
  'current-change',
  'node-expand',
  'node-collapse',
  'node-drag-start',
  'node-drag-enter',
  'node-drag-leave',
  'node-drag-over',
  'node-drag-end',
  'node-drop',
])

const treeRef = ref(null)

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return treeRef.value?.[key]
      },
      has(target, key) {
        return key in treeRef.value
      },
    },
  ),
)
</script>
